<script setup lang="ts">
import screen from '/@/assets/Test1.jpeg'
import {useWebSocketStore} from "/@/store";
import {storeToRefs} from "pinia";

const webSocketStore = useWebSocketStore();
const {
    currentMemberList,
    currentGroupMember,
    currentGroup,
    currentContact,
    currentAllMessageList
} = storeToRefs(webSocketStore);

</script>

<template>
    <el-container class="member-container">
        <el-header height="60px">
            <el-row class="card-header">
                <span class="online">在线人数:{{ currentGroup.onlineNum }}</span>
                <el-button class="button" size="small" type="primary" bg>邀请好友</el-button>
            </el-row>
        </el-header>
        <el-main>
            <ul class="infinite-list">
                <li class="infinite-list-li" v-for="(item,index) in currentGroupMember" :key="index">
                    <div class="member-avator-container">
                        <el-avatar class="member-avator" :size="36" :src="item.avatar"></el-avatar>
                        <i v-if="item.activeStatus===1"></i>
                    </div>
                    <span>{{ item.username }}</span>
                </li>
            </ul>
        </el-main>
    </el-container>
</template>

<style lang="scss" scoped>
.member-container {

  height: calc(100vh - 120px);
  overflow: auto;

  .el-header {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 60px;
      border-bottom: 1px solid #e6e6e6;
      border-top-right-radius: 10px;

      .online {
        font-size: 12px;
        width: 50%;
      }

      .button {
        margin: 0 auto;
          //height: 100%;
        width: 50%;
        white-space: nowrap; /* 禁止文本换行 */
        overflow: hidden; /* 隐藏溢出的内容 */
        text-overflow: ellipsis; /* 在溢出的位置显示省略号 */
      }
    }
  }

  .el-main {

    .infinite-list {
      //height: 300px;
      padding: 0;
      margin: 0;
      list-style: none;

      .infinite-list-li {
        margin-bottom: 10px;
        line-height: 36px;
        height: 36px;
        display: flex;

        .member-avator-container {
          position: relative;
          height: 36px;
          width: 36px;
          margin-right: 5px;

          i {
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 1;
            width: 30%;
            height: 30%;
            background-color: greenyellow;
            border-radius: 50%;
          }

          .member-avator {
            margin: 0 auto;
          }
        }

      }
    }


  }
}


</style>